<!-- 设备管理-设备档案管理-设备备件清单厂内型号弹窗 -->
<template>
  <px-dialog v-model="visible" class="equip-dialog-wrap" title="厂内型号" width="1080px" @open="openDialog" @close="closeDialog">
    <div class="equip-dialog-content">
      <px-form ref="formRef" class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
        <px-row :gutter="16" style="width: 100%">
          <px-col :span="9">
            <px-form-item label="类型" style="width: 100%; margin-right: 16px">
              <px-tree-select
                v-model="queryParams.typeCode"
                style="width: 100%"
                placeholder="请选择类型"
                filterable
                :data="typeList"
                :render-after-expand="false"
                :props="{ children: 'children', label: 'name', value: 'code' }"
                clearable
                @visible-change="initTypeList"
              />
            </px-form-item>
          </px-col>
          <px-col :span="9">
            <px-form-item label="厂内型号" style="width: 100%; margin-right: 16px">
              <px-input
                v-model="queryParams.model"
                placeholder="请输入厂内型号"
                maxlength="50"
                clearable
                @blur="queryParams.model = $event.target.value.trim()"
                @keyup.enter="queryTable"
              >
                <template #suffix>
                  <px-icon style="cursor: pointer" @click="queryTable">
                    <search />
                  </px-icon>
                </template>
              </px-input>
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <div class="equip-dialog-btn">
              <px-button type="primary" @click="queryTable">查询</px-button>
              <px-button @click="resetTable">重置</px-button>
            </div>
          </px-col>
        </px-row>
      </px-form>
      <px-table ref="sparePartsTableRef" :data="tableData" class="equip-table" size="small" height="400" border @selection-change="selectionChange">
        <px-table-column type="selection" width="40" align="center" />
        <px-table-column type="index" width="60" align="center" label="序号" />
        <px-table-column prop="typeName" label="类型" min-width="105" show-overflow-tooltip />
        <px-table-column prop="model" label="厂内型号" min-width="195" show-overflow-tooltip />
      </px-table>
      <div v-show="total > 0" style="text-align: right">共 {{ total }} 条数据</div>
      <div style="margin-top: 16px; text-align: right">
        <px-button @click="closeDialog">取消</px-button>
        <px-button type="primary" @click="handleSubmit">确定</px-button>
      </div>
    </div>
  </px-dialog>
</template>
<script setup lang="ts">
import { reactive, toRefs, computed } from "vue";
import { PxMessage } from "px-ui";
import { queryListTree_1, queryListPage_5 } from "@/api/equip/spareParts";

// 调用父级-关闭弹窗方法
const emits = defineEmits(["closeDialog", "addSpecTable"]);
// 父级传过来的值
const props = defineProps(["dialogVisible", "className"]);
const visible = computed(() => props.dialogVisible);
// 页面本身的值
const state = reactive<any>({
  typeList: [],
  queryParams: {
    typeCode: "",
    model: "",
    pageNum: 1,
    pageSize: 9999
  },
  tableData: [],
  total: 0,
  sparePartsTableRef: null,
  selectTable: []
});
const { typeList, queryParams, tableData, total, sparePartsTableRef, selectTable } = toRefs(state);
// 类型下拉框
const initTypeList = async () => {
  const data = await queryListTree_1({ className: props.className });
  typeList.value = data || [];
};
// 查询备件列表
const queryTable = async () => {
  const params = queryParams.value;
  const data = await queryListPage_5(params);
  tableData.value = data?.data || [];
  total.value = data?.data.length;
};
// 重置筛选条件和备件列表
const resetTable = async () => {
  queryParams.value = {
    className: props.className,
    typeCode: "",
    model: "",
    pageNum: 1,
    pageSize: 9999
  };
  queryTable();
};
// 表格多选框选中
const selectionChange = (val: any) => {
  selectTable.value = val;
};
// 确定选择备件
const handleSubmit = () => {
  if (selectTable.value && selectTable.value.length === 0) {
    PxMessage.warning("请选择厂内规格");
    return;
  }
  emits("closeDialog");
  emits("addSpecTable", selectTable.value);
};

// 打开弹窗
const openDialog = () => {
  queryParams.value.className = props.className;
  queryParams.value.typeCode = "";
  queryParams.value.model = "";
  tableData.value = [];
  total.value = 0;
  queryTable();
  initTypeList();
};
// 关闭弹窗
const closeDialog = () => {
  emits("closeDialog");
};
</script>
<style lang="scss" scoped>
@import url("@/views/all/equip/scss/add-dialog.scss");
</style>
